<template>
  <!-- 实景 -->
  <div v-show="showPhotos" class="photos">
    <div
      v-loading="loading"
      class="img-box"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)">
      <div id="imageViewer" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>

<script>
// import 《组件名称》 from '《组件路径》';
import axios from 'axios'
import qs from 'qs'
let env = process.env.VUE_APP_MAP_LINE
var imageViewer
var imageViewerUrl = 'http://172.20.98.156:8088/imageserver'
var trainEnt
export default {
  components: {},
  data() {
    return {
      showPhotos: false,
      currentUrl: '',
      currentIndex: 0,
      centerDialogVisible: false,
      timer: null,
      play: false,
      playIcon: require('@/assets/images/gis/2.png'),
      stopIcon: require('@/assets/images/gis/3.png'),
      btnList: [
        {
          id: 'btn1',
          clicked: false,
          icon: require('@/assets/images/gis/1.png'),
          remark: '上一张'
        },
        {
          id: 'btn2',
          clicked: false,
          icon: require('@/assets/images/gis/2.png'),
          remark: '播放|暂停'
        },
        {
          id: 'btn3',
          clicked: false,
          icon: require('@/assets/images/gis/4.png'),
          remark: '下一张'
        }
        // {
        //   id: "btn4",
        //   clicked: false,
        //   icon: require("@/assets/images/gis/5.png"),
        //   remark: "固定"
        // },
        // {
        //   id: "btn5",
        //   clicked: false,
        //   icon: require("@/assets/images/gis/8.png"),
        //   remark: "时序"
        // }
      ],
      imgList: [
        {
          id: 'img1',
          url:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          info: '第一张2022-02-01'
        },
        {
          id: 'img2',
          url:
            'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          info: '第二张2022-02-02'
        },
        {
          id: 'img3',
          url:
            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          info: '第三张2022-02-03'
        }
        // {
        //   id: "img4",
        //   url:
        //     "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
        //   info: "第四张2022-02-04"
        // },
        // {
        //   id: "img5",
        //   url:
        //     "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
        //   info: "第五张2022-02-05"
        // }
      ],
      //
      token: '',
      loading: true
    }
  },
  computed: {},
  watch: {},
  created() {
    env = process.env.VUE_APP_MAP_LINE
    if (!env) {
      env = 'out'
    }
  },
  mounted() {
    // 仅内网调用
    if (env === 'inner') {
      this.loading = true
      this.getToken()
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {
    imageViewer = null
  }, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  methods: {
    show(t, trainEntity, viewer) {
      if (env === 'out') {
        return
      }

      this.showPhotos = t
      if (t) {
        trainEnt = trainEntity
        if (imageViewer) {
          imageViewer.play()
          imageViewer.onLocate = function(x, y) {
            trainEnt.show = true
            trainEnt.position = Cesium.Cartesian3.fromDegrees(
              Number(x),
              Number(y)
            )
            // if (viewer) {
            //   viewer.zoomTo(trainEnt);
            // }
          } // 实景更新实时返回该实景的经纬度坐标
        }
      } else {
        trainEnt.show = false
        trainEnt.position = Cesium.Cartesian3.fromDegrees(0, 0)
        if (imageViewer) {
          imageViewer.pause()
        }
      }
    },

    getToken() {
      axios
        .post(
          imageViewerUrl + '/token',
          qs.stringify({
            username: tyeMapConf().imageViewerConfig.username,
            password: tyeMapConf().imageViewerConfig.password
          })
        )
        .then(response => {
          if (response.data.length > 0) {
            this.token = response.data
            // this.init(this.token);
          }
        })
        .catch(function(error) {})
        .finally(() => {
          this.init(this.token)
        })
    },
    init(token) {
      token = token || 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsiYWxsIl0sInVzZXJfbmFtZSI6ImdlbmVyYWwiLCJqdGkiOiIyNzBhYjM4Ny1jMGIxLTRjMGYtOGFjOS03N2FlMGE5YjFiZTMiLCJjbGllbnRfaWQiOiJpbWFnZXNlcnZlciIsInNjb3BlIjpbImRhdGE6cmVhZCJdfQ.QSD95BSWLj-5UZY_aTbZ0ho7CHQ7LVbKCVCSyn4SWyczv5aTz7lxw3Ld6SEbV5zBQ_014TgFt-YMnhQzV0RSqcRNilUkJzVA21dLL--8oyaQ7B-SVpQHIKOUOO5DNsjQELBoRm8ZZB1qvkxcWkd4V8P-zXpCq6ixM2FbytTpTJHvah_sG4gidXCyiu6tLGW4dgX9j2sX_XLTySctKpDPj6bk8Y0Q5iN7cdhURwd-hgiEu-jw5q2e27VMjayMW52wQvhT0aDZBWRoAD0yquted2WN5c_AIszjleJqqaDULipaCDJznaJIRuP0n6LDSNPWZK1Weo6Dbk4n-e235aYCnA';
      const ele = document.getElementById('imageViewer')
      const opts = {
        baseUrl: imageViewerUrl, // 服务地址
        token: token, // 唯一标识 默认普通用户
        serviceName: tyeMapConf().imageViewerConfig.serviceName, // 服务名称
        step: 1000, // 可选 默认100,播放速度(毫秒值)
        cache: 1000 // 可选 默认1000,缓存张数(数值)
      }
      if (window.IIV) {
        imageViewer = new window.IIV.IImageViewer(ele, opts)
        this.loading = false
        imageViewer.render(0) // 参数 index (从第几张开始，默认为0)
      }
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
.photos {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  right: 0;
  background-color: antiquewhite;
  .btns {
    position: absolute;
    top: 3vh;
    right: 3vh;
    border: 1px solid #000;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 20vh;
    height: 4vh;
    z-index: 9;

    .btn {
      height: 3vh;
      width: 3vh;
      cursor: pointer;
      img {
        width: 3vh;
        height: 3vh;
      }
    }
    #btn1 {
      transform: rotate(180deg);
    }
  }
  .img-box {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    user-select: none;
    img {
      -webkit-user-drag: none;
    }
  }
}
</style>
